-
Notifications
You must be signed in to change notification settings - Fork 14.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: adjust line type as well as weight for time series #30949
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
// https://apache.github.io/echarts-handbook/en/basics/release-note/5-3-0/#removing-the-default-bolding-emphasis-effect-in-the-line-chart | ||
// TODO: should consider only adding emphasis to currently hovered series | ||
lineStyle: { | ||
width: 'bolder', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@villebro is it ok to remove this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also removed the line boldness on hover because on dashed lines the animation is a bit distracting.
@eschutho I believe this was added to keep the hover behavior consistent with other chart types.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How do you feel about us removing the bolder weight? It looks like the echarts community didn't like the look of it on the line chart, so they removed it. It just seems more distracting than anything on the line chart imo.
@@ -288,11 +288,20 @@ export default function transformProps( | |||
entry, | |||
ensureIsArray(chartProps.rawFormData?.time_compare), | |||
)!; | |||
if (!offsetLineWidths[offset]) { | |||
offsetLineWidths[offset] = Object.keys(offsetLineWidths).length + 1; | |||
if (!offsetLineWidths.includes(offset)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The previous map approach is more efficient than looping through the elements with include
.
879919b
to
5a7feff
Compare
5a7feff
to
fcc9656
Compare
fcc9656
to
82603e6
Compare
SUMMARY
The line thicknesses were with time adjustments were making the visualization difficult to read. Instead, I kept the existing thickness to match the legacy line chart and adjusted the dashed pattern instead.
I also removed the line boldness on hover because on dashed lines the animation is a bit distracting.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
After:
Hover animation:
Before:
Screen.Recording.2024-11-15.at.5.39.03.PM.mov
After:
Screen.Recording.2025-01-17.at.5.50.33.PM.mov
TESTING INSTRUCTIONS
Create a line chart with a time comparison and add more than 5 time comparisons.
ADDITIONAL INFORMATION